<script setup>
defineProps({
  ext: Object
})

const effects = [{
  name: "基础动画",
  value: ""
}, {
  name: "弹性动画",
  value: "jump"
}, {
  name: "渐变动画",
  value: "fade"
}, {
  name: "渐变缩小动画",
  value: "fade-zoomOut"
}, {
  name: "渐变放大动画",
  value: "fade-zoomIn"
}, {
  name: "翻转",
  value: "flip"
}, {
  name: "卡片",
  value: "cards"
}/*, {
  name: "滚动 coverflow",
  value: "coverflow"
}*/, {
  name: "creative-01",
  value: "creative-01"
}, {
  name: "creative-02",
  value: "creative-02"
}, {
  name: "creative-03",
  value: "creative-03"
}, {
  name: "creative-04",
  value: "creative-04"
}, {
  name: "creative-05",
  value: "creative-05"
}, {
  name: "creative-06",
  value: "creative-06"
}]
</script>

<template>
  <div class="ele-prop-item elem-design-prop-logic" v-if="ext">
    <el-form ref="form" label-position="top" size="mini">
      <el-form-item label="自动播放">
        <el-radio-group v-model="ext.autoplay">
          <el-radio :label="false">手动</el-radio>
          <el-radio :label="true">自动</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="滑动方向">
        <el-radio-group v-model="ext.vertical">
          <el-radio :label="false">水平</el-radio>
          <el-radio :label="true">垂直</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="ext.loop">
          <el-radio :label="false">单向</el-radio>
          <el-radio :label="true">循环</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="一页数量">
        <el-col :span="14">
          <el-slider
            v-model="ext.multiple"
            input-size="mini"
            height="20"
            :min="1" :max="5"
            size="mini">
          </el-slider>
        </el-col>
      </el-form-item>

      <el-form-item label="切换间隔">
        <el-col :span="14">
          <el-slider
            v-model="ext.interval"
            input-size="mini"
            height="20"
            :min="500" :max="10000"
            :step="10"
            size="mini">
          </el-slider>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="8" class="tip-txt">{{ ext.interval / 1000 }}s</el-col>
      </el-form-item>
      <el-form-item label="动画时长">
        <el-col :span="14">
          <el-slider
            v-model="ext.duration"
            input-size="mini"
            height="20"
            :min="100" :max="10000"
            :step="10"
            size="mini">
          </el-slider>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="8" class="tip-txt">{{ ext.duration / 1000 }}s</el-col>
      </el-form-item>
      <el-form-item label="动画效果">
        <el-row>
          <el-col :span="12" v-for="effect in effects">
            <div
              class="art-font effect-item"
              :class="{ 'active': ext.effect === effect.value }"
              @click="ext.effect = effect.value"
            >
              {{ effect.name }}
            </div>
          </el-col>
<!--          <el-col :span="12">
            滚动 coverflow
          </el-col>-->
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.effect-item {
  //width: 100%;
  line-height: 1.8;
  //height: 40px;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
  margin: 1px;

  &:hover {
    border-color: var(--j-border-color);
  }
  &.active {
    border-color: var(--j-color-primary);
  }
}
</style>
